import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';

class PhotoViewGalleryScreen extends StatefulWidget {
  List images = [];
  List thumbnails = [];
  int index = 0;
  String heroTag;
  PageController controller;

  PhotoViewGalleryScreen(
      {Key key,
      @required this.images,
      @required this.thumbnails,
      this.index,
      this.controller,
      this.heroTag})
      : super(key: key) {
    controller = PageController(initialPage: index);
  }

  @override
  _PhotoViewGalleryScreenState createState() => _PhotoViewGalleryScreenState();
}

class _PhotoViewGalleryScreenState extends State<PhotoViewGalleryScreen> {
  int currentIndex = 0;
  MediaQueryData mediaQuery;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    currentIndex = widget.index;
  }

  @override
  Widget build(BuildContext context) {
    mediaQuery = MediaQuery.of(context);
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Positioned(
              top: 0,
              left: 0,
              bottom: 0,
              right: 0,
              child: InkWell(
                  child: Container(
                      child: PhotoViewGallery.builder(
                    scrollPhysics: const BouncingScrollPhysics(),
                    builder: (BuildContext context, int index) {
                      return PhotoViewGalleryPageOptions(
                        imageProvider: NetworkImage(widget.images[index]),
                        heroAttributes: widget.heroTag.isNotEmpty
                            ? PhotoViewHeroAttributes(tag: widget.heroTag)
                            : null,
                      );
                    },
                    itemCount: widget.images.length,
                    loadingBuilder: (context, event) {
                      return loadingWidget(event, currentIndex);
                    },
                    backgroundDecoration: null,
                    pageController: widget.controller,
                    enableRotation: true,
                    onPageChanged: (index) {
                      setState(() {
                        currentIndex = index;
                      });
                    },
                  )),
                  onTap: () {
                    Navigator.of(context).pop();
                  })),
          Positioned(
            //图片index显示
            top: MediaQuery.of(context).padding.top + 15,
            width: MediaQuery.of(context).size.width,
            child: Center(
              child: Text("${currentIndex + 1}/${widget.images.length}",
                  style: TextStyle(color: Colors.white, fontSize: 16)),
            ),
          ),
          // Positioned(
          //   //右上角关闭按钮
          //   right: 10,
          //   top: MediaQuery.of(context).padding.top,
          //   child: IconButton(
          //     icon: Icon(
          //       Icons.close,
          //       size: 30,
          //       color: Colors.white,
          //     ),
          //     onPressed: () {
          //       Navigator.of(context).pop();
          //     },
          //   ),
          // ),
        ],
      ),
    );
  }

//加载界面
  Widget loadingWidget(ImageChunkEvent event, int currentIndex) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Stack(
        children: [
          Positioned(
              top: mediaQuery.padding.top,
              height: mediaQuery.size.height,
              width: mediaQuery.size.width,
              child: Center(
                child: Image.network(widget.thumbnails[currentIndex]),
              )),
          Positioned(
            top: mediaQuery.padding.top,
            child: SizedBox(
              //限制进度条的高度
              height: 5.0,
              //限制进度条的宽度
              width: mediaQuery.size.width,
              child: new LinearProgressIndicator(
                  //0~1的浮点数，用来表示进度多少;如果 value 为 null 或空，则显示一个动画，否则显示一个定值
                  value: (event?.cumulativeBytesLoaded == null
                          ? 0.0
                          : event.cumulativeBytesLoaded.toDouble()) /
                      (event?.expectedTotalBytes == null
                          ? 1.0
                          : event.expectedTotalBytes.toDouble()),
                  //背景颜色
                  backgroundColor: Colors.grey,
                  //进度颜色
                  valueColor: new AlwaysStoppedAnimation<Color>(Colors.blue)),
            ),
          ),
        ],
      ),
    );
  }
}
